<template>
  <el-container style="height: 100vh;">
    <el-aside width="200px" :class="{ 'aside-collapse': asideCollapse }">
      <div class="avatar_box">
        <img src="../assets/logo.jpg" alt="logo" class="avatar" />
        <span class="system_name">海报设计系统</span>
      </div>
      <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
        <el-menu-item index="1"><i class="el-icon-s-home"></i>首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-setting"></i>系统管理</template>
          <el-menu-item index="2-1">用户管理</el-menu-item>
          <el-menu-item index="2-2">菜单管理</el-menu-item>
          <el-menu-item index="2-3">角色管理</el-menu-item>
        </el-submenu>
        <el-menu-item index="3"><i class="el-icon-picture-outline"></i>海报管理</el-menu-item>
        <el-menu-item index="4"><i class="el-icon-files"></i>素材管理</el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <i
          class="layout-toggle-icon el-icon-s-fold"
          v-if="!asideCollapse"
          @click="toggleAsideCollapse"
        ></i>
        <i
          class="layout-toggle-icon el-icon-s-unfold"
          v-if="asideCollapse"
          @click="toggleAsideCollapse"
        ></i>
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-avatar" style="cursor: pointer;">
            <img src="../assets/avatar.jpg" class="avatar" alt="头像" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="personalInfo">个人信息</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main class="main">Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1', // 设置默认激活的菜单项
      asideCollapse: false, // 侧边栏收起状态
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      // 这里可以根据 key 来处理不同的页面展示逻辑
    },
    toggleAsideCollapse() {
      this.asideCollapse = !this.asideCollapse;
    },
    handleCommand(command) {
      if (command === 'personalInfo') {
        // 处理点击个人信息的逻辑
        console.log('跳转至个人信息页面');
      } else if (command === 'logout') {
        // 处理退出登录的逻辑
        console.log('退出登录');
      }
    },
  },
};
</script>

<style scoped>
html, body, #app {
  height: 100%;
  margin: 0;
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: #333;
  color: #fff;
  height: 100%;
  transition: width 0.3s ease; /* 添加过渡效果 */
}

.avatar_box {
  display: flex;
  align-items: center;
  padding-left: 16px;
  background-color: #444;
  height: 60px; /* 与header一致 */
  border-bottom: 1px solid #555;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.system_name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  text-align: center;
  position: relative;
}

.layout-toggle-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  font-size: 18px;
  cursor: pointer;
}

.el-avatar {
  cursor: pointer;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  flex-grow: 1; /* 确保main部分占据剩余的高度 */
}

/* 自定义菜单样式 */
.el-menu-vertical-demo {
  background-color: #333;
  border-right: none;
}

::v-deep .el-menu-item,
::v-deep .el-submenu__title {
  background-color: #333;
  color: #fff;
}

::v-deep .el-menu-item:hover,
::v-deep .el-submenu__title:hover,
::v-deep .el-menu-item.is-active {
  background-color: #444 !important;
}

/* 侧边栏折叠样式 */
.aside-collapse {
  width: 60px;
}

.aside-collapse .el-menu-item,
.aside-collapse .el-submenu__title {
  text-align: center;
}

.aside-collapse .avatar_box {
  justify-content: center;
  padding-left: 0;
}

.aside-collapse .system_name {
  display: none;
}
</style>
